<template>
<div class="tinymce-container">
    <el-form ref="form">   
      <el-form-item label="案例代码名称"  label-width="100px">
        <el-input v-model="codeContent.codeName"></el-input>
      </el-form-item>
      <el-form-item label="案例演示代码"  label-width="100px">
          <mavon-editor codeStyle="atelier-forest-light" :ishljs="true" ref=md @imgAdd="upload" @imgDel="imgDel" v-model="codeContent.content"></mavon-editor>
      </el-form-item>
      <el-form-item label="上传案例代码"  label-width="100px">
        <el-upload
          class="upload-demo"
          ref="upload"
          multiple="false"
          action="http://api-itmentu.secby.cn/api/markdown"
          :headers="headers"
          :on-success="mdsuccess"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">可选操作，只能上传md文件，且不超过1MB，上传后，会覆盖编辑器内容</div>
        </el-upload>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="success" class="filter-item" @click="saveCode(0)">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconicon_btn_tjsh" />
          </svg>
          保存案例代码
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import '@/assets/prism/prism.css'
import '@/assets/prism/prism.js'
import '@/assets/highlight/styles/dark.min.css'
import {oneCodeContent,getCodeContent,addCodeContent,modifyCodeContent,deleteCodeContent} from '@/api/publish'
import { getUser } from '@/utils/store'
export default {
  name: 'PublishCode',
  data () {
    return {
      options: null,
      codeContent:{
        id:'',
        content:'',//代码
        codeName:'' //代码名称
      },
      //上传图片列表
      img_file: {},
      codeStyle:'monokai-sublime',//主题
      headers:{
        token:null
      }
    }
  },
  created(){
    const Authorization = getUser()
    this.headers.token=Authorization.token

    //判断当前操作
    const id = this.$route.query.id
    if(id==undefined || id=='' || id==null){
      //增加
      this.initCodeData()
    }else{
      //修改操作
      this.oneCode(id)
    }
  },
  methods: {
    mdsuccess(resp){
      this.codeContent.content=resp
    },
    submitUpload() {
      const Authorization = getUser()
      this.$refs.upload.submit();
    },
    //获取数据
    async oneCode (id) {
      let result = await oneCodeContent(id)
      //console.log(result)
      this.codeContent=JSON.parse(JSON.stringify(result.data))
      console.log(this.codeContent)
    },
    //初始化
    initCodeData(){
        this.codeContent={
           content:'',//代码
           codeName:'' //代码名称
        }
      this.img_file=[]
    },
    //图片上传
    upload(pos, file){
      this.img_file[pos] = file
      var formdata = new FormData()
      formdata.append("image", file)
      const Authorization = getUser()
      axios({
        url: 'http://api-itmentu.secby.cn/api/upload',
        method: 'post',
        data: formdata,
        headers: { 
          'Content-Type': 'multipart/form-data',
          'token':Authorization.token
        },
      }).then((res) => {  //图片上传到服务器返回图片url 链接
        this.$refs.md.$img2Url(pos, res.data.data);  //通过ref插入到文档中
      });
    },
    //加载数据
    async loadCode(code){
        this.codeContent=JSON.parse(JSON.stringify(code))
    },

    //添加代码块
    async saveCode () {
      const id = this.$route.query.id
      if(id==undefined || id=='' || id==null){
        //增加
        let result = await addCodeContent(this.codeContent)
        if(result.code==20000){
          this.$message({ type: 'success', message: '增加成功!' })
          this.$router.push({ path: '/code/list'})
        }else {
          this.$message({ type: 'error', message: temp.message })
        }
      }else{
        //修改操作
        let result = await modifyCodeContent(this.codeContent)
        if(result.code==20000){
          this.$message({ type: 'success', message: '修改成功!' })
          this.$router.push({ path: '/code/list'})
        }else {
          this.$message({ type: 'error', message: temp.message })
        }
      }
      
    },
    //删除图片
    imgDel(pos) {
        delete this.img_file[pos];
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/scss/element-variables.scss';
.tinymce-container {
  padding: 30px;
  text-align: left;

  .el-form {
    .title {
      .el-input__inner {
        padding: 0;
        padding-bottom: 19px;
        border: none;
        border-bottom: 2px solid #ebeef5;
        border-radius: 0;
        line-height: 26px;
        font-size: 20px;
        color: $--color-text-placeholder;
      }
    }

    // .el-form-item {
    //   margin: 20px 0;
    // }

    .btn {
      border-top: 2px solid #ebeef5;
      // margin: 0 15px;
      // padding: 30px 0;
      padding-top: 31px;
      margin-bottom: 0;
    }
  }
}

.editor-content {
  margin-top: 20px;
}

.img_list {
  width: 155px;
  height: 103px;
  float: left;
  margin: 0px auto;
  border: 1px solid #eee;
  overflow: hidden;
  border-radius: 4px;
  margin: 0px 18px 16px 0;
  position: relative;
}

.img_list_con {
  flex: 1;
  overflow: hidden;
  margin-left: 30px;
  max-height: 340px;
}

.selected {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px !important;
  height: 33px !important;
}

.img_list img {
  width: 155px;
  height: 103px;
  display: block;
  cursor: pointer;
}

.pagination {
  text-align: center;
}

.upload_pic_show {
  display: block;
  width: 240px;
  height: 180px;
  margin: 15px auto 10px;
}

.single_pic {
  width: 278px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed $--border-color-base;
  border-radius: 4px;
  cursor: pointer;
}

.three_pic {
  display: flex;
  flex-direction: row;
  width: 840px;
  height: 180px;
  cursor: pointer;

  .three_pic_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed $--border-color-base;
    border-right: none;
  }

  .three_pic_item:last-child {
    border-right: 2px dashed $--border-color-base;
  }
}

.single_pic:hover, .three_pic_item:hover {
  color: $--color-primary;
}

.single_pic .icon, .three_pic .three_pic_item .icon {
  width: 40px;
  height: 40px;
}

.single_pic span, .three_pic .three_pic_item span {
  line-height: normal;
}

.single_pic img, .three_pic .three_pic_item img {
  width: 278px;
  height: 180px;
  object-fit: cover;
}

.el-switch {
  height: auto;
  margin-bottom: 30px;
}

.el-switch__label {
  position: absolute;
  color: $--color-text-secondary;
}

.el-switch__label.is-active {
  color: $--color-text-primary;
  font-weight: 600;
}

.el-switch__label--left {
  left: 0;
  margin-left: 16px;
  z-index: 9999;
}

.el-switch__label--right {
  right: 0;
  margin-right: 10px;
}

.el-switch__core {
  height: 40px;
  border-radius: 4px;
}

.el-switch__core:after {
  width: 66px;
  height: 32px;
  top: 3px;
  left: 3px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.el-switch.is-checked .el-switch__core::after {
  margin-left: 76px;
  left: 3px;
}

.el-dialog__footer {
  border-top: 2px solid #EBEEF5;
}
.el-select{
  width: 100%;
}
</style>
